<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: black;
            color: white;
        }
        .we_need{
            width: 1200px;
            margin: 0 auto;
        }
        input{
            display: block;
            width: 300px;
            height: 40px;
            margin: 20px 0px;
            font-size: 18px;
            outline: none;
        }
        .we_need{
            width: 300px;

        }
        p{
            text-align: center;
            font-size: 40px;
        }
        button{
            width: 200px;
            height: 60px;
            margin: 0 auto;
            font-size: 19px;
            cursor: pointer;
        }
        .op{
            width: 180px;
            height: 60px;
            margin: 0 auto;
            margin-top: 40px;
            display: none;
        }
        .op>div{
            height: 40px;
            width: 40px;
            background-color: white;
            float: left;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
            color: black;
            margin: 10px 10px;
        }
        span{
            display: none;
        }
        .ddd{
            font-size: 200px;
            width: 800px;
            margin: 0 auto;
            display: none;
        }
    </style>
</head>
<body>
    <div class="we_need">
        <div class="we">
            <p>死亡倒计时</p>
            <input type="text" value="请输入倒计时开始的时" data-index="0">
            <input type="text" value="请输入倒计时开始的分" data-index="1">
            <input type="text" value="请输入倒计时开始的秒" data-index="2">
            <div class="we" style="width: 200px; margin: 0 auto;">
                <button>开始</button>
            </div>
        </div>
        <div class="op">
            <span>0</span><div class="h"></div>
            <span>0</span><div class="m"></div>
            <span>0</span><div class="s"></div>
        </div>
    </div>
    <div class="ddd">
        你死了!
    </div>
    <script>
        var we_need = document.querySelector('.we_need');
        var ddd = document.querySelector('.ddd');
        var input = document.querySelectorAll('input');
        var btn = document.querySelector('button');
        var op = document.querySelector('.op');
        var h1 = document.querySelector('.h');
        var m1 = document.querySelector('.m');
        var s1 = document.querySelector('.s');
        var h;
        var m;
        var s;
        var v = [];
        var time = null;
        function die(){
            var s2 = s1.innerHTML*1;
            var m2 = m1.innerHTML*1;
            var h2 = h1.innerHTML*1;
            s2--;
            if(s2 == -1 && m2 > 0){
                s2 = 59;
                m2--;
                if(m2 == -1 && h2 > 0){
                    m2 == 59;
                    h2--;
                }
            }
            if(s2 ==-1 && m2 == 0 && h2 > 0){
                h2--;
                m2 = 59;
                s2 = 59;
            }

            if(s2 == -1 && m2 ==0 && h2 == 0){
                clearInterval(time);
                we_need.style.display='none';
                ddd.style.display='block';
                return;
            }
            h1.innerHTML = h2;
            m1.innerHTML = m2;
            s1.innerHTML = s2;
        }
        for(var i = 0;i < input.length ; i++ ){
            v[i] = input[i].value;
        }//获取value值
        for(var i = 0;i < input.length ; i++ ){
            input[i].onfocus = function(){
                if(this.value == v[this.getAttribute('data-index')]){
                    this.value='';
                    this.style.color='black';  
                }
            }
            input[i].onblur = function(){
                if(this.value == ''){
                    var j = v[this.getAttribute('data-index')]
                    this.value = j;
                }
            }
        }//出现与消失
        btn.addEventListener('click',function(){
            h = input[0].value*1;
            m = input[1].value*1;
            s = input[2].value*1;
            // if(h <= 9){
            //     h='0'+h;
            // }
            // if(m <= 9){
            //     m='0'+m;
            // }
            // if(s <= 9){
            //     s='0'+s;
            // }
            h1.innerHTML = h;
            m1.innerHTML = m;
            s1.innerHTML = s;
            if(isNaN(h1.innerHTML) || isNaN(m1.innerHTML) || isNaN(s1.innerHTML)){
                op.style.display = 'none';   
            }else{
                op.style.display = 'block';
                btn.disabled = 'true';   
                time = setInterval(die,1000);
            }
        })


    </script>
</body>
</html>